<template>
	<Card style="width:100%" class="Logon">
		<p slot="title" class="title">
			注册
		</p>
		<Form ref="formValidate" :model="formValidate" :rules="rule" :label-width="70">
			<FormItem label="商家注册" prop="bool">
				<i-switch v-model="formValidate.bool" size="large">
					<span slot="open">On</span>
					<span slot="close">Off</span>
				</i-switch>
			</FormItem>
			<FormItem label="名字" prop="name">
				<Input v-model="formValidate.name" placeholder="请输入你的名字"></Input>
			</FormItem>
			<FormItem label="用户名" prop="account">
				<Input v-model="formValidate.account" placeholder="请输入你的账号"></Input>
			</FormItem>
			<FormItem label="密码" prop="password">
				<Input type="password" v-model="formValidate.password" placeholder="请输入你的密码"></Input>
			</FormItem>
			<FormItem label="确认密码" prop="passwords">
				<Input type="password" v-model="formValidate.passwords" placeholder="再次确认你的密码"></Input>
			</FormItem>
			<FormItem label="地址" prop="address">
				<Input v-model="formValidate.address" placeholder="请输入你的住址"></Input>
			</FormItem>
			<FormItem label="餐品类型" prop="type" v-if="formValidate.bool">
				<Input v-model="formValidate.type" placeholder="请输入你的餐品类型"></Input>
			</FormItem>
			<FormItem label="商区" prop="district" v-if="formValidate.bool">
				<Input v-model="formValidate.district" placeholder="请输入你的商区"></Input>
			</FormItem>
			<FormItem label="电话" prop="phone" v-if="formValidate.bool">
				<Input v-model="formValidate.phone" placeholder="请输入你的电话"></Input>
			</FormItem>
			<FormItem class="button">
				<Button type="primary" @click="logon">确定</Button>
				<Button @click="login">返回</Button>
			</FormItem>
		</Form>
	</Card>
</template>
<script>
	import axios from 'axios'
	export default {
		data() {
			const validatePassCheck = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.formValidate.password) {
					callback(new Error('密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				formValidate: {
					name: '',
					password: '',
					account: '',
					address: '',
					passwords:'',
					bool:'',
					district:'',
					phone:'',
					type:'',
				},
				rule: {
					name: [
						{required: true, message: '名字不能为空'}
					],
					account: [
						{required: true, message: '账号不能为空'}
					],
					password: [
						{required: true, message: '密码不能为空'}
					],
					passwords: [
						{validator: validatePassCheck, trigger: 'blur'}
					],
				}
			}
		},
		mounted() {

		},
		methods: {
			async logon() {
				if(this.formValidate.bool){
					let logon = await axios.post('/Shop/register',(this.formValidate))
					this.register = logon
				}
				if(!this.formValidate.bool){
					let logon = await axios.post('/reception/login/register',(this.formValidate))
					this.register = logon
				}
				console.log(this.register)
				if(this.register.data.status){
					this.$Message.info('注册成功');
					return this.$router.push('/')
				}
				this.$Message.info(this.register.data.error);
			},
			login() {
				return this.$router.push('/')
			}
		}
	}
</script>

<style lang="less">
	.Logon {

		.title {
			font-size: 20px;
		}

		.button {
			margin: 0;
			text-align: right;

			button {
				margin-left: 20px;
			}
		}
		body{
			 max-width: 600px;
			 margin: auto;
		 }
	}

</style>